<template>
  <div id="jxcp">
    <div class="container">
      <div class="jx">
        <h1>精选藏品集</h1>
        <div class="jxheader">
          <span class="active" id="cpjActive" @click="cpjActive">藏品集</span>
          <span @click="mhActive" id="mhActive">盲盒</span>
          <span><router-link to="*">更多</router-link></span>
        </div>
        <div class="jxbody">
          <!-- <index-jxcp/> -->
          <ul>
            <!-- <index-jxcp :jxlodata="this.data.datamhlb" /> -->
            <div class="index-jxcp">
              <template>
                <swiper
                  ref="swiper"
                  @mouseover.native="stopSwiper"
                  @mouseout.native="startSwiper"
                  :options="swiperOption"
                  v-if="jxlbdata"
                >
                  <swiper-slide v-for="n in jxlbdata" :key="n.pid">
                    <li>
                      <div class="jxb-1" @click="jxlb">
                        <img
                          :src="'http://127.0.0.1:3000/' + n.cover_picture"
                          alt=""
                        />
                        <div class="jxb-1-1">
                          <img
                            :src="'http://127.0.0.1:3000/' + n.head_portrait"
                            alt=""
                          />
                          <div class="jxb-1-2">
                            <span>{{ n.collection_name }}</span>
                            <div>
                              <img
                                class="icon"
                                :src="'http://127.0.0.1:3000/' + n.icon"
                                alt=""
                              />
                              <p>官方已认证</p>
                            </div>
                          </div>
                          <div class="jxb-1-3">
                            <p>by {{ n.nick_name }}</p>
                            <p>
                              地板价: ￥<span>{{ n.price }}</span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </li>
                  </swiper-slide>
                </swiper>
              </template>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/css/index.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "swiper-example-multiple-slides-per-biew",
  title: "Multiple slides per view",
  components: {
    Swiper,
    SwiperSlide,
  },
  mounted() {
    this.getJxlb();
  },
  // props: ["jxlodata"],
  data() {
    return {
      jxlbdata: null,
      datamhlb: null,
      swiperOption: {
        slidesPerView: 4,
        loop: true,
        speed: 5000,
        autoplay: {
          delay: 0,
          disableOnInteraction: false,
        },
      },
    };
  },
  methods: {
    //精选轮播 点击添加激活样式
    cpjActive() {
      // console.log('点击了藏品集');
      document.getElementById("mhActive").classList.remove("active");
      document.getElementById("cpjActive").classList.add("active");
    this.getJxlb();

    },
    mhActive() {
      // console.log('盲盒被点击了');
      document.getElementById("mhActive").classList.add("active");
      document.getElementById("cpjActive").classList.remove("active");
      var url = "http://127.0.0.1:3000/v1/pro/mhcarousel";
      this.axios.get(url).then((res) => {
        console.log("首页盲盒轮播数据", res);
        this.jxlbdata = res.data;
      });
    },
    //精选轮播路由跳转
    jxlb() {
      this.$router.push("*");
    },
    //精选藏品轮播数据
    getJxlb() {
      var url = "http://127.0.0.1:3000/v1/pro/jxzpcarousel";
      this.axios.get(url).then((res) => {
        console.log("藏品轮播:", res);
        this.jxlbdata = res.data;
      });
    },
    stopSwiper() {
      // console.log('$refs:',this.$refs);
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    startSwiper() {
      // console.log('$refs:',this.$refs);
      this.$refs.swiper.$swiper.autoplay.start();
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper-wrapper {
  transition-timing-function: linear;
}
</style>
